<script setup>
import { storeToRefs } from 'pinia';
import { useGlobalStore } from '@/stores/golbal'
const { productList } = storeToRefs(useGlobalStore())
let {productIndex} = storeToRefs(useGlobalStore())
const getSvgUrl = (name) => {
    return new URL(`/src/assets/productPicture/${name}`, import.meta.url).href
}
//点击切换
const changeProduct = (index) => {
    productIndex.value = index
}



</script>
<template>
    <div class="main-left-suspended-content-bar">
        <div class="main-left-suspended-content-bar-top" @click="changeProduct(-1)">
            <svg width="50" height="50" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.3334 10H35" stroke="white" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                <path d="M13.3334 20H35" stroke="white" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                <path d="M13.3334 30H35" stroke="white" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                <path d="M5 10H5.01667" stroke="white" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                <path d="M5 20H5.01667" stroke="white" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                <path d="M5 30H5.01667" stroke="white" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        </div>
        <div class="main-left-suspended-content-bar-border"></div>
        <div v-for="item in productList" :class="{'product-active': productIndex === item.id,'product-list-class':true}" @click="changeProduct(item.id)" >
            <div class="product-type">
                <img class="product-type-img" :src="getSvgUrl(item.icon)" alt="">
            </div>
            <div class="product-text">{{ item.name }}</div>
        </div>
    </div>
</template>
<style scoped>

.main-left-suspended-content-bar {
    width: 110px;
    height: 75%;
    background-color: var(--szc-bg-main-green);
    position: relative;
    top: 7%;
    border-radius: 0 22px 22px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    
}

.main-left-suspended-content-bar-top{
    width: 50px;
    height: 50px;
    position: relative;
    top: -1.5%;
    padding-top: 10%;
}

.main-left-suspended-content-bar-border{
    position: absolute;
    top: 10%;
    height: 0;
    width: 100%;
    border-bottom: 3px solid #fff;
}

.product-type{
    /* width: 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 8%;
}

.product-type-img {
    width: 40px;
    height: 40px;
    display: block;
    position: relative;
    z-index: 999;
}

.product-text{
    color: #fff;
    margin-top: 5%;
    font-weight: 700;
    text-align: center;
}

.product-active{
    background-color: #D9C767;
}

.product-list-class{
    width: 100%;
    height: 81px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.product-list-class:hover{
    background-color: #D9C767;
}
</style>